<template>
	<view class="container">
		<uni-list>
			<uni-list-item v-for="(item,index) in recordList" :key="index">
				<template v-slot:body>
					<view class="flex justify-between list-item">
						<view class="flex flex-column">
							<text class="type">{{item.status|type}}</text>
							<text class="time">{{item.addtime|time}}</text>
						</view>
						<view class="flex flex-column">
							<text class="status">{{item.status|status}}</text>
							<text class="value">{{item.num}}</text>
						</view>
					</view>
				</template>

			</uni-list-item>
			<uni-load-more :status="status"></uni-load-more>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPage:0,
				pageSize:10,
				status: "more",
				recordList:[]
			}
		},
		filters:{
			type(value){
				switch (value) {
				  case 1:
				  case 2:
				  case 4:
				    return '转入';
				    break;
				  case 3:
				  case 5:
				  case 6:
				    return '转出';
				    break;
				}
			},
			status(value){
				switch (value) {
				  case 1:
				    return '成功';
				    break;
				  case 2:
				    return '确认中';
				    break;
				  case 4:
				    return '驳回';
				    break;
				  case 3:
				    return '确认中';
				    break;
				  case 5:
				    return '成功';
				    break;
				  case 6:
				    return '驳回';
				    break;
				}
			}
		},
		methods:{
			async requestApi(){
				if(this.status!="more"){
					return false
				}
				this.status="loading"
				try{
					let res=await this.$u.api.moneyRecordApi({page: this.currentPage+1,row: this.pageSize})
					this.recordList=[...this.recordList,...res.list]
					this.currentPage=parseInt(res.page.page)
					if(this.currentPage>=res.page.page_num){
						this.status="noMore"
					}
					else{
						this.status="more"
					}
				}catch(e){
					//TODO handle the exception
					this.status="more"
				}
			}
		},
		onLoad() {
			this.requestApi()
		},
		onReachBottom(){
			this.requestApi()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		.list-item {
			width: 100%;
			.type {
				font-size: 30rpx;
				font-weight: 500;
				color: #000000;
			}

			.time {
				margin-top: 10rpx;
				color: #999999;
				font-size: 28rpx;
			}

			.status {
				font-size: 28rpx;
				font-weight: 500;
				color: #0263FF;
			}

			.value {
				margin-top: 4rpx;
				font-weight: 500;
				color: #333333;
				font-size: 30rpx;
			}
		}
	}
</style>
